<script>
//选择注册的页面
export default {
  methods: {
    regi_junren() {
      this.$router.push("/FirstPage/junren");
      localStorage.setItem("registertype", "junren")
    },
    regi_shetuan() {
      this.$message.warning("请联系开发者QQ1503490056")
    },
    regi_putongren() {
      this.$router.push("/FirstPage/putongren");
      localStorage.setItem("registertype", "putongren")
    },
    returnBack() {
      this.$router.push("/");
    },
  },
};
</script>

<template>
  <div class="mbody">
    <div @click="returnBack()" style="margin-bottom: 10%" class="back"><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-left"></use>
      </svg></div>
    <div class="logobox">
      <img src="../assets/logo.jpg" alt="小蛋壳" class="logo" />
    </div>
    <div class="reg">请选择一种身份注册</div>
    <br><br><br>
    <div class="buttons">
      <div id="junren" @click="regi_junren()">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bi"></use>
          </svg>
        </div>
        退役大学生
      </div>
      <div id="shetuan" @click="regi_shetuan()">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zuzhijigou"></use>
          </svg>
        </div>
        军事社团
      </div>
      <div id="putongren" @click="regi_putongren()">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xuesheng-copy"></use>
          </svg>
        </div>
        普通大学生
      </div>
      <div id="occu"></div>
    </div>
  </div>
</template>
<style scoped>
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: white;
  overflow: hidden;
}

.reg {
  font-size: 15px;
  text-align: center;
  color: #F59A23;
  margin-top: 90%;
}

.mbody {
  margin: auto;
  width: 100%;
  height: 100vh;
  background-image: url("../assets/purebgp.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: auto;
}

.buttons {
  display: flex;
  height: 10%;
}

.buttons>div {
  padding-top: 15px;
}

#junren {
  text-align: center;
  color: white;
  background-color: #6d000e;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 60%;
  border-radius: 20%;
  margin-left: 3%;
}

.icon1 {
  display: block;
  margin: auto;
}

#shetuan {
  text-align: center;
  color: white;
  background-color: #6d000e;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 60%;
  border-radius: 20%;
  margin-left: 5%;
}

.icon2 {
  display: block;
  margin: auto;
}

#putongren {
  text-align: center;
  color: white;
  background-color: #6d000e;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 60%;
  border-radius: 20%;
  margin-left: 5%;
}

.icon3 {
  display: block;
  margin: auto;
}

.logobox {
  display: flex;
  padding: 0 29%;
  margin-left: 5%;
}

.logo {
  border-radius: 10%;
  width: 100%;
}

#occu {
  width: 1%;
  margin: 0 1%;
}

.back {
  font-size: 20px;
  margin-top: 6px;
}</style>